<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<u-navbar :is-back="false" title="小春云众包" title-color="#fff" :background="background" :titleBold="true">
			<view class="slot-wrap">
				<u-icon name="search" @click="open"></u-icon>
			</view>
		</u-navbar>
		<view class="position: relative;">
			<!-- 表单搜索模块 -->
			<u-sticky bgColor="#EEEEEE40">
				<u-tabs :list="list1" :current="current" :is-scroll="false" @change="change"
					active-color="rgba(22, 92, 156, 0.33)" bg-color="#f3f3f3" bar-width="188"></u-tabs>
			</u-sticky>
			<!-- 项目列表 -->
			<view style="padding: 20rpx;position: relative;">
				<view v-for="(item,index) in proList" :key='index'>
					<projectName :data="item" @topping="topping"></projectName>
				</view>
			</view>
			<!-- 搜索 -->
			<u-popup v-model="show" mode="left" width="568rpx">
				<view style="background-color: rgba(246, 246, 246, 1);height: 100%;padding: 56rpx 40rpx;">
					<view class="text">
						<text style="display: inline-block;margin-bottom: 20rpx;">关键词：</text>
						<u-input v-model="quarylist.name" type="text" :border="true" style="background-color: #FFFFFF;"
							placeholder="" />
					</view>
					<view class="text">
						<text style="display: inline-block;margin-bottom: 20rpx;">任务类型：</text>
						<view class="box" @click="Taskshow = true">
							{{tesk ? tesk : '请选择任务类型'}}
						</view>
						<u-select v-model="Taskshow" mode="single-column" :list="Tesklist" @confirm="selTask">
						</u-select>
					</view>
					<view class="text">
						<text style="display: inline-block;margin-bottom: 20rpx;">技术要求：</text>
						<view class="box" @click="Selshow = true">
							{{lang ? lang : '请选择语言或者技术'}}
						</view>
						<u-select v-model="Selshow" mode="single-column" :list="Langlist" @confirm="selLanguage">
						</u-select>
					</view>
					<view class="text">
						<text style="display: inline-block;margin-bottom: 20rpx;">状态：</text>
						<u-tabs :list="list1" :current="current1" :is-scroll="false" @change="handChange"
							active-color="rgba(24, 144, 255, 1)" bg-color="rgba(246, 246, 246, 1);" bar-width="128"
							height="110"></u-tabs>
					</view>
					<view class="button">
						<u-button type="warning" @click="reset">重置</u-button>
						<u-button type="primary" @click="search">筛选</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 提示信息1 -->
		<view>
			<u-modal ref='proPostModal' v-model="tipsShow" title="温馨提示" confirm-text="确定" confirm-color="#1890FF"
				:async-close="true" :zoom="true" @confirm="confirm">
				<view style="width: 80%; margin: 60rpx auto;line-height: 50rpx;">
					<!-- <view class="">
						请您完善您的银行卡信息，方便平台给您支付报酬。
					</view>
					<view class="">
						如您已授权微信登录，则平台支付的报酬到您的微信钱包。
					</view> -->
					<view class="">
						如果您是手机号登录的，请在“我的”个人头像使用 点击 “微信授权”，平台支付的报酬到您的微信钱包。
					</view>
					<view class="">
						如您已授权微信登录，则平台支付的报酬到您的微信钱包。
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 提示信息2 -->
		<view>
			<u-modal style="ovflow:hidden" ref='wenhaoModal' v-model="wenhaoShow" title="温馨提示" confirm-text="确定"
				confirm-color="#1890FF" :async-close="true" :zoom="true" @confirm="confirm">
				<scroll-view :scroll-y="true" style="height: 1000rpx; width: 100%; padding: 20rpx 0; ">
					<u-parse class="proContent" :html="WarmTipsContent"></u-parse>
				</scroll-view>
			</u-modal>
		</view>
		<!-- 提示信息3 -->
		<view>
			<u-popup v-model="duihaoShow" mode="center" width="600rpx" height="600rpx" border-radius="14" closeable
				close-icon-pos="top-right">
				<view class="contactUs">
					<view style="margin: 30rpx 0; font-size:34rpx;font-weight: 700;">
						关注公众号获取更多项目信息
					</view>
					<u-image width="300rpx" height="300rpx" :src="picSrc">
					</u-image>
					<view style="margin: 40rpx auto;">长按二维码保存到本地</view>
					<!-- <u-button @click="copy" class="button" shape="circle" style="width: 80%;margin: 40rpx 0;">保存到相册</u-button> -->
				</view>
			</u-popup>
		</view>
		<!-- 提示按钮 -->
		<view class="wenhao">
			<u-image height="100rpx" @click="clickWenhao" width="100rpx" src="@/static/image/wenhao.png"></u-image>
			平台规则
		</view>
		<view class="duihao">
			<u-image height="100rpx" @click="clickDuihao" width="100rpx" src="@/static/image/duihao.png"></u-image>
			加入我们
		</view>
		<!-- 提示文字 -->
		<view class="fixed">
			<!-- <u-image src="../../static/image/icon.png" mode="" width='38rpx' height='44rpx'></u-image> -->
			<div style="width: 38rpx;height: 44rpx;margin-left: 10rpx;">
				<u-swiper :list="textAvatar" interval="30000" :circular="false" height="44"></u-swiper>
			</div>
			<!-- <u-notice-bar :volume-icon="false" mode="horizontal" :list="textList" :is-circular="false" type="error" style="width: 100%;line-height: 64rpx;" padding="15rpx 0rpx" color="#FFFFFF" bg-color="rgba(0, 0, 0, 0)" :duration="30000"></u-notice-bar> -->
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in textList" :key="index">
					<view class="swiper-item">{{item}}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import projectName from "./component/projectName.vue"
	export default {
		components: {
			projectName
		},
		data() {
			return {
				autoplay: true,
				interval: 30000,
				duration: 500,
				picSrc: "",
				value: '',
				Taskshow: false,
				Selshow: false,
				Tesklist: [],
				Langlist: [],
				tesk: '',
				lang: '',
				textList: [],
				textAvatar: [],
				WarmTipsContent: "",
				wenhaoShow: false,
				duihaoShow: false,
				tipsShow: false,
				show: false,
				time: "",
				requirment: "",
				cycle: "",
				timeT: "发布状态",
				requirmentT: "技术要求",
				cycleT: "项目周期",
				proList: [],
				background: {
					background: '#1890ff'
				},
				list1: [{
					name: '招标中',
					value: 'normal'
				}, {
					name: '进行中',
					value: 'doing'
				}, {
					name: '已完成',
					value: 'close'
				}, {
					name: '全部'
				}],
				current: 0,
				current1: 0,
				times: [{
						label: "全部",
						value: "all"
					},
					{
						label: "投标中",
						value: "normal"
					},
				],
				requirments: [],
				cycles: [],
				quarylist: {
					status: "normal", // 发布状态
					page: 1,
					page_size: 10
				},
			}
		},
		methods: {
			// 弹窗确定
			confirm() {
				this.tipsShow = false
				this.wenhaoShow = false
				this.duihaoShow = false
			},
			// 获取银行卡列表
			// getBankCardList(callback) {
			// 	this.$u.api.getBankCardList().then(res => {
			// 		if (res.code == 1) {
			// 			callback(res.data)
			// 		}
			// 	})
			// },
			// 判断是否为微信浏览器
			weixinBrowser() {
				let ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') != -1;
			},
			// 置顶
			topping(id) {
				this.proList.forEach((item, index) => {
					if (item.id == id) {
						this.proList.splice(index, 1)
						this.proList.unshift(item)
					}
				})
			},
			// 格式化筛选条件
			filterFormat() {
				this.quarylist.status = "normal"
				// this.quarylist.cycletime = ""
				// this.quarylist.position_id = ""
				// this.timeT = "发布状态"
				// this.requirmentT = "技术要求"
				// this.cycleT = "项目周期"
			},
			// 数据格式化
			dataFormat() {
				this.quarylist.page = 1
				this.proList = []
			},
			// 获取岗位筛选列表
			getPostListOfFiler() {
				this.$u.api.getSkillList().then(res => {
					const postList = res.data.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					})
					this.requirments = postList
				})
			},
			// 切换时间
			timeChange(value) {
				this.dataFormat()
				let title = this.times.filter(item => item.value === value)
				this.timeT = title[0].label
				this.quarylist.status = title[0].value
				this.getData()
			},
			// 切换技术要求
			requirmentChange(value) {
				this.dataFormat()
				let title = this.requirments.filter(item => item.value === value)
				this.requirmentT = title[0].label
				this.quarylist.position_id = title[0].value
				this.getData()
			},
			// 周期切换
			cycleChange(value) {
				this.dataFormat()
				let title = this.cycles.filter(item => item.value === value)
				this.cycleT = title[0].label
				this.quarylist.cycletime = title[0].value
				this.getData()
			},
			// tabs切换
			change(index) {
				this.current = index;
				this.quarylist.status = this.list1[index].value;
				this.quarylist.page = 1
				this.getData()
			},
			handChange(index) {
				this.current1 = index;
				this.quarylist.status = this.list1[index].value;
			},
			selLanguage(e) {
				this.lang = e[0].label;
				this.quarylist.lang = e[0].value;
			},
			selTask(e) {
				this.tesk = e[0].label;
				this.quarylist.type = e[0].value
			},
			// 文字滚动
			textInfo() {
				this.textList = [];
				this.textAvatar = [];
				this.$u.api.getText().then(res => {
					let text = res.data;
					text.forEach(item => {
						this.textList.push(item.nickname + item.ago + '领取' + parseInt(item.money) +
							'元项目费用')
						this.textAvatar.push(item.avatar)
					})
				})
			},
			open() {
				this.Tesklist = [];
				this.Langlist = [];
				this.$u.api.getTask().then(res => {
					let list = res.data;
					list.forEach(item => {
						this.Tesklist.push({
							label: item.name,
							value: item.id
						})
					})
				})
				this.$u.api.getLanguage().then(res => {
					let list = res.data;
					list.forEach(item => {
						this.Langlist.push({
							label: item.name,
							value: item.id
						})
					})
				})
				this.show = true;
			},
			// 搜素
			search() {
				this.$u.api.getProList(this.quarylist).then(res => {
					this.proList = [...res.data];
					this.show = false;
					this.current = this.current1
				})
			},
			// 重置
			reset() {
				this.quarylist = {
					page: 1,
					page_size: 10
				}
				this.tesk = '';
				this.lang = '';
				this.current1 = 0
			},
			// 得到全部数据
			getData(callback) {
				this.$u.api.getProList(this.quarylist).then(res => {
					this.proList = [...res.data]
					callback && callback()
				})
			},
			// 判断手机号登录和有无银行卡
			isShowTips() {
				this.$u.api.showTips().then(res => {
					if (res.code == 1) {
						this.tipsShow = true
					}
				})
			},
			// 温馨提示弹窗
			clickWenhao() {
				this.getWarmTips()
				this.wenhaoShow = true
			},
			// 公众号弹窗
			clickDuihao() {
				this.getWwChartAccount()
				this.duihaoShow = true
			},
			// 获取温馨提示内容
			getWarmTips() {
				this.$u.api.getConfigInfo({
					key: "bidding_guide"
				}).then(res => {
					if (res.code === 1) {
						this.WarmTipsContent = res.data.content
					}
				})
			},
			// 获取公众号
			getWwChartAccount() {
				this.$u.api.getConfigAdmin().then(res => {
					if (res.code === 1) {
						let pic = res.data
						this.picSrc = this.$u.http.config.baseUrl + pic
					}

				})
			},
		},
		created() {
			this.getPostListOfFiler()
		},
		onLoad() {
			// if (!this.$u.untils.isLogin()) return
			// let isWeixin = this.weixinBrowser()
			if (this.vuex_token) {
				this.isShowTips()
			}
			this.getData();
			this.textInfo()
		},

		// 触底
		onReachBottom() {
			this.quarylist.page++
			this.$u.api.getProList(this.quarylist).then(res => {
				this.proList = [...this.proList, ...res.data]
				callback && callback()
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.quarylist.page = 1
			this.proList = []
			// this.filterFormat()
			if (this.current == 0) {
				this.quarylist.status = "normal"
			} else if (this.current == 1) {
				this.quarylist.status = "doing"
			} else if (this.current == 2) {
				this.quarylist.status = "close"
			} else {
				this.quarylist.status = ""
			}
			this.getData(() => {
				uni.stopPullDownRefresh()
			})
		}



	}
</script>

<style scoped lang="scss">
	page {
		background-color: rgb(244, 244, 244);
	}

	/deep/.u-model__title {
		font-weight: 700;
	}

	.main {
		// position: relative;
		background-color: #f5f5f5;
		height: calc(100%);
	}

	.select {
		background-color: white;
		// position: fixed;
		// z-index: 1;
		// top: 80rpx;
	}

	.slot-wrap {
		display: flex;
		flex-direction: row-reverse;
		color: #FFFFFF;
		font-size: 36rpx;
		justify-content: space-between;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 40rpx;
	}

	.wenhao {
		z-index: 99;
		position: fixed;
		bottom: 340rpx;
		right: 20rpx;
	}

	.duihao {
		z-index: 99;
		position: fixed;
		bottom: 180rpx;
		right: 20rpx;
	}

	.fixed {
		z-index: 99;
		width: 600rpx;
		position: fixed;
		top: 162rpx;
		left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 8rpx;
		padding: 10rpx 6rpx;
	}
	
	.swiper {
			width: 100%;
			height: 70rpx;
		}
		
	.swiper-item{
		width: 100%;
		padding-left: 10rpx;
	}
	
	uni-swiper-item{
		display: flex;
		align-items: center;
	}

	.contactUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	/deep/.u-scroll-box .u-tab-item {
		font-weight: bold;
	}

	.text {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 32rpx;

		.box {
			width: 100%;
			line-height: 40rpx;
			font-size: 28rpx;
			color: rgba(24, 144, 255, 1);
			text-align: center;
			border-bottom: 4rpx solid rgba(24, 144, 255, 1);
		}
	}

	.button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 36rpx;

		button {
			width: 210rpx;
			height: 88rpx;
			border-radius: 8rpx;
		}
	}

	/deep/.u-navbar-fixed {
		z-index: 9999999 !important;
	}

	/deep/.u-drawer {
		top: 88rpx;
	}
</style>
